import {
  login
} from '@api/apis.js'
import router from '../../router/router.js'
import {
  mix
} from '../../utils/color.js'
import {
  ElMessage
} from 'element-plus'

export default {
  namespaced: true,
  state: {
    userInfo: {},
    token: sessionStorage.getItem('token') || '',
    isCollapse: true,
    themeConfig: {
      primary: '#4060c7',
      tabColor: '#FFFFFF',
      footColor: '#606266',
      backgroundColor: '#FFFFFF',
      textColor: '#00000099',
      istags: false
    }
  },
  mutations: {
    setToken(state, token) {
      state.token = token
    },
    setUserInfo(state, userinfo) {
      state.userInfo = userinfo
    },
    SetIsCollapse(state, isCollapse) {
      state.isCollapse = isCollapse
    },
    setThemeConfig(state, primary) {
      state.themeConfig.primary = primary
    },
    setThemeConfigTbaColor(state, primary) {
      state.themeConfig.tabColor = primary
      if (primary === '#FFFFFF') {
        state.themeConfig.footColor = '#606266'
      } else {
        state.themeConfig.footColor = '#ffffff'
      }
    },
    setThemeConfigMenuColor(state, primary) {
      if (primary) {
        state.themeConfig.backgroundColor = '#FFFFFF'
        state.themeConfig.textColor = '#00000099'
      } else {
        state.themeConfig.backgroundColor = '#1d2129'
        state.themeConfig.textColor = '#bdbdc0'
      }
    },
    setThemeConfigchangeTags(state, primary) {
      if (primary) {
        state.themeConfig.istags = true
      } else {
        state.themeConfig.istags = false
      }
    }
  },

  actions: {
    login({
      commit
    }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo)
          .then((res) => {
            console.log(res.data)
            sessionStorage.setItem('token', res.data.token)
            sessionStorage.setItem('userInfo', JSON.stringify(res.data))
            commit('setToken', res.data.token)
            commit('setUserInfo', res.data)
            router.replace('/')
            ElMessage({
              message: '登录成功',
              type: 'success'
            })
            resolve()
          })
          .catch((err) => {
            reject(err)
          })
      })
    },
    changeIsCollapse({
      commit
    }, str) {
      console.log(str)
      commit('SetIsCollapse', str)
    },

    changeThem({
      commit
    }, str) {
      commit('setThemeConfig', str)
      const pre = '--el-color-primary'
      // 白色混合色
      const mixWhite = '#ffffff'
      // 黑色混合色
      const mixBlack = '#000000'
      const el = document.documentElement
      el.style.setProperty(pre, str)
      // 这里是覆盖原有颜色的核心代码
      for (let i = 1; i < 10; i += 1) {
        el.style.setProperty(`${pre}-light-${i}`, mix(str, mixWhite, i * 0.1))
      }
      el.style.setProperty('--el-color-primary-dark', mix(str, mixBlack, 0.1))
    },
    changeTabColor({
      commit
    }, val) {
      commit('setThemeConfigTbaColor', val)
    },
    changeMenuColor({
      commit
    }, val) {
      commit('setThemeConfigMenuColor', val)
    },
    changeTags({
      commit
    }, val) {
      commit('setThemeConfigchangeTags', val)
    }
  }
}
